<template>
    <!-- 语言选择 -->
    <el-dropdown
        trigger="click"
        @command="handleLanguageChange"
    >
        <div class="icon-container">
            <BaseSvgIcon
                icon="language"
                :size="size"
            />
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item
                    :disabled="locale === item"
                    :command="item"
                    v-for="item in localeCodes"
                    :key="item"
                >
                    {{ $t(`language.${item}`) }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts">
    defineProps({
        size: {
            type: String,
            required: false,
        },
    });

    const { locale, localeCodes, setLocaleCookie } = useI18n();

    /**
     * @description: 选择语言
     * @param {*} lang
     */
    function handleLanguageChange(lang: string) {
        locale.value = lang;
        setLocaleCookie(lang);
    }
</script>
